<template>
 <nav>
        <span class="tuijian">推荐</span>
        <span class="dongtai">各地动态</span>
        <span class="xiaoketang">小课堂</span>
        <span class="shipin">视频</span>
    </nav>
</template>

<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
nav{
    height: 3rem;
    width: 100%;
    background-color: burlywood;
    display: flex;
    justify-content: space-between;
    line-height: 0.3rem;
}
.tuijian{
    font-size: .20rem;
    color: #f3f4f6;
    width:32%;
    height:3rem;
     align-self: center;
    line-height: 3rem;

}
.dongtai{
    font-size: .18rem;
    color: blue;
     width:32%;
    height:3rem;
     align-self: center;
    line-height: 3rem;
}
.xiaoketang{
    font-size: .18rem;
    color: #f3f4f6;
     width:32%;
    height:3rem;
     align-self: center;
    line-height: 3rem;
}
.shipin{
    font-size: .18rem;
    color: #f3f4f6;
     width:32%;
    height:3rem;
     align-self: center;
    line-height: 3rem;
}
</style>
